<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          sytle="width: 100%">
          <el-table-column
            prop="goods.name"
            label="商品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="goods.image"
            label="商品图片"
            width="180">
            <template slot-scope="scope">
              <img :src="getSrcUrl(scope.row.goods.image)" width="60" height="80"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="goods.price"
            label="商品原价（元）"
            width="180">
          </el-table-column>
          <el-table-column
            prop="price"
            label="商品秒杀价（元）"
            width="180">
          </el-table-column>
          <el-table-column
            prop="stock"
            label="库存数量"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            // 插槽，获取行数据的一切数据
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDetail(scope.row.id)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import MiaoShaHeader from "./common/Header"
import MiaoShaFooter from "./common/Footer"
import axios from "axios";
import { getServerUrl } from "@/config/sys";

export default {
  name: "Main",
  data() {
    return {
      tableData: []
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(item) {
      return getServerUrl('image/' + item);
    },
    getMiaoShaGoods() {
      let url = getServerUrl("/miaoShaGoods/findAll");
      let token = window.sessionStorage.getItem("token");
      if (!token) {
        alert("登录信息失效，请重新登录。");
      }
      axios.defaults.headers.common['token'] = token;
      axios.get(url, {})
        .then(response => {
            this.tableData = response.data.data;
        }).catch(error => {
        alert(error + '请联系管理员。');
      })
    },
    openDetail(id) {
      this.$router.push({
        name: "Detail",
        params: { id: id }
      })
    }
  },
  mounted() {
    this.getMiaoShaGoods();
  }
}
</script>

<style scoped>

</style>
